.slide-fade-enter-active {
  transition: all 0.2s ease;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(5px);
  opacity: 0;
}

.slidingVerifyView {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(125, 125, 125, 0.5);

  > :first-child {
    padding: 185px 7px 7px;
    background: #fff;
    box-sizing: content-box;
    border-radius: 2px;
  }
}

.tips {
  height: 37px;
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 10;
  overflow: hidden;
  box-sizing: border-box;

  .imgs {
    opacity: 0;
    z-index: 1;
    position: absolute;
    bottom: 40px;
    left: 0;
    transition: 0.5s;
  }

  &::before {
    position: relative;
    font-size: 14px;
    z-index: 10;
    box-sizing: border-box;
    line-height: 35px;
    display: inline-block;
    width: 100%;
    border: 1px solid #999;
    color: #aaa;
    border-radius: 3px;
    content: attr(data-placeholder);
  }

  .trail {
    position: absolute;
    z-index: 10;
    top: 0px;
    bottom: 0px;
    left: 0px;
    border: 1px solid;
    border-radius: 3px;

    &.move {
      border-color: #006bf8;
      background: #80b7ff;
    }

    &.ok {
      border-color: #35cdbd;
      background: #cef5ef;
    }

    &.error {
      border-color: #fd7a7d;
      background: #fee1e1;
    }
  }

  .drag {
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    top: 0;
    width: 37px;
    height: 37px;
    font-size: 30px;
    border-radius: 3px;
    border: 1px solid #999;
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .icon {
      fill: #666;
    }

    padding: 5px;

    &.move {
      border-color: #006bf8;
      background: #006bf8;

      .icon {
        fill: #fff;
      }
    }

    &.ok {
      border-color: #35cdbd;
      background: #35cdbd;

      .icon {
        fill: #fff;
      }
    }

    &.error {
      background: #fd7a7d;
      border-color: #fd7a7d;

      .icon {
        fill: #fff;
      }
    }
  }

  &.inHover {
    overflow: inherit;

    .imgs {
      opacity: 1;
      box-sizing: content-box;
      margin-bottom: 10px;
      border-radius: 2px;
      overflow: hidden;
    }
  }
}


.slide-bottom {
  display: flex;
  padding-top: 3px;
  margin-top: 5px;
  justify-content: space-between;

  .reload {
    position: relative;
    display: flex;
    font-size: 25px;
    height: 25px;
    align-items: center;
    gap: 5px;

    .icon {
      cursor: pointer;
      fill: #999;
    }
  }
}
